<template>
  <div
    id="paymentChooseModel"
    class="payment-choose-model"
    :class="{isShow: isShow}"
    @click="paymentModelClick"
  >
    <div class="payment-cont">
      <div class="payment-title">
        <span>选择优先支付方式</span>
      </div>
      <div class="payment-choose-list">
        <div class="payment-item" v-for="item in paymentCodeAccount" :key="item.code">
          <span>{{item.account}}</span>
          <i
            :class="showPaymentItem(item.account)"
            :data-id="item.id"
            @click="choosePayment(item.account)"
          >
            <span></span>
          </i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  data: function() {
    return {
      paymentCodeAccount: [
        {
          code: "CNY",
          account: "现金",
          currency: "人民币",
          id: "15152662437"
        }
      ]
    };
  },
  computed: {
    getPaymentChoose() {
      return this.$store.state.wealthRecharge.paymentChoose;
    },
    //是否显示面板
    isShow() {
      return this.$store.state.wealth.isShowPaymentChooseModel;
    }
  },
  methods: {
    showPaymentItem(account) {
      return {
        active: account === this.getPaymentChoose ? true : false
      };
    },
    choosePayment(account) {
      this.$store.commit(
        "wealthRecharge/SET_WEALTH_RECHARGE_PAYMENT_CHOOSE",
        account
      );
    },
    paymentModelClick(e) {
      if (e.target.id && e.target.id === "paymentChooseModel") {
        this.$store.commit("wealth/SET_isShowPaymentChooseModel", false);
      }
    }
  }
};
</script>

<style scoped>
.payment-choose-model {
  display: none;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.payment-choose-model.isShow {
  display: block;
}
.payment-cont {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
}
.payment-choose-model.isShow .payment-cont {
}
.payment-title {
  height: 108px;
  border-bottom: 2px solid #ededf0;
}
.payment-title span {
  margin-left: 30px;
  line-height: 108px;
  font-family: "PingFangSC-Regular";
  font-size: 30px;
  color: rgb(102, 102, 102);
}
.payment-choose-list {
}
.payment-choose-list .payment-item {
  margin-left: 30px;
  line-height: 112px;
  height: 112px;
  border-bottom: 2px solid #ededf0;
}
.payment-choose-list .payment-item:last-child {
  border-bottom: 0;
}
.payment-choose-list .payment-item span {
  font-family: "PingFangSC-Regular";
  font-size: 32px;
  color: rgb(41, 41, 41);
}
.payment-choose-list .payment-item i {
  /* float: right;
  display: inline-block; */
  position: absolute;
  right: 40px;
  margin-top: 38px;
  width: 36px;
  height: 36px;
  border: 2px solid #bec2cc;
  border-radius: 36px;
}
.payment-choose-list .payment-item i.active {
  border: 2px solid #2086f9;
}
.payment-item i span {
  display: block;
  margin-left: 8px;
  margin-top: 8px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 16px;
}
.payment-item i.active span {
  background-color: #2086f9;
}
</style>
